<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style>
	.panpel-left{
		width:33%;
		border:solid 1px black;
		float:left;
	}
	.panpel-center{
		width:33%;
		margin:auto;
		display:inline-block;
		border:solid 1px black;
	}
	.panpel-right{
		width:33%;
		border:solid 1px black;
		float:right;
	}
	.card{
		width:39%;
		height：100px;
		background: #fff;
    	border-radius: 3px;
   		cursor: pointer;
   		float:left;
   		margin:0 20px;
	}
	.cardTop{
		width: -webkit-fill-available;
    	height: 70px;
    	padding: 10px 14px 0 30px;
	}
	.name{
		font-size: 36px;
    	color: #333;
	}
	.ren{
		font-size: 18px;
   	 	color: #999;
	}
	.icon{
		width: 50px;
    	height: 50px;
    	float: right;
    	border:solid 1px black;
	}
	.cardBottom{
		width: 100%;
    	height: 30px;
    	line-height: 30px;
    	border-radius: 0 0 3px 3px;
    	vertical-align: middle;
	}
	.Dueto{
		width:90%;
		height:180px;
		margin:20px auto;
		border:solid 1px black;
	}
	.card-back1{
		background-image: linear-gradient(-90deg,#87f4e2,#42d2b9);
	}
	.card-back2{
		background-image: linear-gradient(-90deg,#81d4ff,#4cb5f2);
	}
	.card-back3{
		background-image: linear-gradient(-90deg,#81d4ff,#4cb5f2);
	}
	.card-back4{
		background-image: linear-gradient(-90deg,#81d4ff,#4cb5f2);
	}
	.ttime{
		width:3px;
		height:3px;
		background:red;
		border-radius:3px;
		display:block;
		margin:auto;
	}
</style>
</head>
<body>

<script type="text/javascript">
		$(function(){
			vaa();
			$(".calendar-nav").click(function(){
				setTimeout(function(){
					vaa(); 
				}, 10);
				
			});
		})
		function vaa(){
				var a=$(".calendar-text").html();
				$.ajax({
					url:'calendaryf',
					type:"post",
					async:false,
					data:{"imouthyear":a},
					success:function(data){
						//获取所有的日期进行遍历
							$(".calendar-day").each(function(){
								var h="";//获取某日期的提醒，如果有多个，则进行追加，并换行显示
								for(var z=0;z<data.length;z++){
									//当日历控件中的日期与数据库中的日期匹配时，则在该日期旁添加相应的提醒
									if($(this).attr("abbr")==data[z]["itime"]){
										h+=data[z]["iremind"]+"\n";
										$(this).attr({"title":h})
									} 
								}
								if($(this).attr("title")!=null){
									$(this).append("<a class='ttime'></a>");
								}
							});
							
					} 
				});
				/* if($(".calendar-today").attr("abbr")=="2019,1,7"){
					alert("今天有事");
				} */
		}
	</script>
<div style="width:1185px;margin:auto;height:100%;background: #f3f3f9;">
	<div style="height:30px;border:solid 1px red;"></div>
	<div style="margin:20px auto;">
	<div class="panpel-left">
		<div style="overflow:hidden">
			<div class="card">
			<div class="cardTop">
				<span class="name">0</span>	
				<span class="ren">人</span>	
				<div class="icon"></div>
			</div>
			<div class="cardBottom card-back1">
				<img style="float: right; margin-right: 10px;margin-top: 8px;"/>
				<span style="float: right;font-size: 14px;margin-right: 10px;color: #fff;">待入职</span>
			</div>
		</div>
		
		<div class="card">
			<div class="cardTop">
				<span class="name">0</span>	
				<span class="ren">人</span>	
				<div class="icon"></div>
			</div>
			<div class="cardBottom card-back2">
				<img style="float: right; margin-right: 10px;margin-top: 8px;"/>
				<span style="float: right;font-size: 14px;margin-right: 10px;color: #fff;">带转正</span>
			</div>
		</div>
		</div>
		<!-- 到期提醒-->
		<div>
			<div class="Dueto">
				<p>待办事项</p>
				<div style="float:left;width:49%;border:solid 1px red">
					<div style="width:60px;height:60px;margin:5px auto;border:solid 1px"></div>
					<div style="font-size: 18px;color: #333;margin: 10px 0 5px;text-align: center;">
						<span>0</span>
						<span>人</span>
					</div>
					<div style="font-size: 14px;color: #666;text-align: center;">生日提醒</div>
				</div>
				<div style="float:right;width:49%;border:solid 1px red">
					<div style="width:60px;height:60px;margin:5px auto;border:solid 1px"></div>
					<div style="font-size: 18px;color: #333;margin: 10px 0 5px;text-align: center;">
						<span>0</span>
						<span>人</span>
					</div>
					<div style="font-size: 14px;color: #666;text-align: center;">合同到期提醒</div>
				</div>
			</div>
		</div>	
	</div>
		
		
		<div class="panpel-center">
			<div style="overflow:hidden">
				<div class="card">
			<div class="cardTop">
				<span class="name">0</span>	
				<span class="ren">人</span>	
				<div class="icon"></div>
			</div>
			<div class="cardBottom card-back3">
				<img style="float: right; margin-right: 10px;margin-top: 8px;"/>
				<span style="float: right;font-size: 14px;margin-right: 10px;color: #fff;">待调动</span>
			</div>
		</div>
		
		<div class="card">
			<div class="cardTop">
				<span class="name">0</span>	
				<span class="ren">人</span>	
				<div class="icon"></div>
			</div>
			<div class="cardBottom card-back4">
				<img style="float: right; margin-right: 10px;margin-top: 8px;"/>
				<span style="float: right;font-size: 14px;margin-right: 10px;color: #fff;">待离职</span>
			</div>
		</div>
			</div>
			
			<div>
				<div id="cc" class="easyui-calendar" style="width:90%;height:280px;margin:20px auto;"></div>
			</div>
		</div>
		
		
		<div class="panpel-right">
			<div style="width:90%;height:280px;margin:auto;">
				<div style="width:100%;height:30px;">快捷入口</div>
				<div>
					<div style="width:100%;height:125px;">
						<div style="float:left;width:49%;height:100%;"></div>
						<div style="float:right;width:49%;height:100%;"></div>
					</div>
					<div style="width:100%;height:125px;">
						<div style="float:left;width:49%;height:100%;"></div>
						<div style="float:right;width:49%;height:100%;"></div>
					</div>
				</div>
			</div>
		</div>
		
  </div>
	</div>
	
	
</body>
</html>